---
created:
source_filename: /home/runner/work/mknodes/mknodes/mknodes/pages/mkclasspage/__init__.py
source_function: MkClassPage.__init__
source_line_no: 46
hide:
- toc
icon: material/square-medium
status: new
template: The nodes/Image nodes/mkcard.html
title: MkCard
---
[:fa-brands-github: Show source on GitHub](https://github.com/phil65/mknodes/blob/main/mknodes/basenodes/mkcard/__init__.py)
### A card node, displaying an image, a button-like label and a hover caption.
!!! info "Description"
This node requires addtional CSS to work.
=== "Examples"
### Example: **With link**
!!! jinja "Jinja"
``` {.jinja }
{{ "Title" | MkCard("https://picsum.photos/300", target="https://phil65.github.io/mknodes/") }}
```
!!! python "Python"
``` {.python }
MkCard('Title', 'https://picsum.photos/300', target='https://phil65.github.io/mknodes/')
```
===! "Rendered"
=== "Markdown"
``` {.markdown }
```
=== "Html"
``` {.html }
```
### Example: **With caption**
!!! jinja "Jinja"
``` {.jinja }
{{ "Title" | MkCard("https://picsum.photos/300", caption="Caption") }}
```
!!! python "Python"
``` {.python }
MkCard('Title', 'https://picsum.photos/300', caption='Caption')
```
===! "Rendered"
Caption
=== "Markdown"
``` {.markdown }
Caption
```
=== "Html"
``` {.html }
Caption
```
### Example: **Separate dark mode image**
!!! jinja "Jinja"
``` {.jinja }
{{ "Title" | MkCard("https://picsum.photos/300", path_dark_mode="https://picsum.photos/200") }}
```
!!! python "Python"
``` {.python }
MkCard('Title', 'https://picsum.photos/300', path_dark_mode='https://picsum.photos/200')
```
===! "Rendered"
=== "Markdown"
``` {.markdown }
```
=== "Html"
``` {.html }
```
=== "DocStrings"
::: mknodes.MkCard
options:
show_docstring_description: False
=== "Base classes"
| Name | Children | Inherits |
|--- | --- | --- |
| **[MkTemplate](https://phil65.github.io/mknodes/)**
*mknodes.templatenodes.mktemplate*
Node representing a jinja template\. | - [MkCliDoc](https://phil65.github.io/mknodes/)
- [MkMaterialBadge](https://phil65.github.io/mknodes/)
- [MkImageCompare](https://phil65.github.io/mknodes/)
- [MkImageSlideshow](https://phil65.github.io/mknodes/)
- [MkIFrame](https://phil65.github.io/mknodes/)
- [MkCard](https://phil65.github.io/mknodes/)
- [MkInstallGuide](https://phil65.github.io/mknodes/)
- [MkCodeOfConduct](https://phil65.github.io/mknodes/)
- [MkCommitConventions](https://phil65.github.io/mknodes/)
- [MkPullRequestGuidelines](https://phil65.github.io/mknodes/)
- [MkDevEnvSetup](https://phil65.github.io/mknodes/)
- ...
| - [MkContainer](https://phil65.github.io/mknodes/)
|
=== "⋔ Inheritance diagram"
``` mermaid
graph TD
94875590125488["mkcard.MkCard"]
94875592700464["mktemplate.MkTemplate"]
94875590900096["mkcontainer.MkContainer"]
94875594508576["mknode.MkNode"]
94875592833088["node.Node"]
140216716431552["builtins.object"]
94875592700464 --> 94875590125488
94875590900096 --> 94875592700464
94875594508576 --> 94875590900096
94875592833088 --> 94875594508576
140216716431552 --> 94875592833088
```
=== "NodeFile"
``` {.toml title='/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkcard/metadata.toml'}
[metadata]
icon = "mdi:square-medium"
status = "new"
name = "MkCard"
group = "image"
[[resources.css]]
filename = "grid.css"
[examples.with_link]
title = "With link"
jinja = """
{{ "Title" | MkCard("https://picsum.photos/300", target="https://phil65.github.io/mknodes/") }}
"""
[examples.with_caption]
title = "With caption"
jinja = """
{{ "Title" | MkCard("https://picsum.photos/300", caption="Caption") }}
"""
[examples.dark_mode_image]
title = "Separate dark mode image"
jinja = """
{{ "Title" | MkCard("https://picsum.photos/300", path_dark_mode="https://picsum.photos/200") }}
"""
[output.markdown]
template = """
{% set image = (node.image ~ "#only-light") if node.path_dark_mode else node.image %}
{% if node.target %}
{% endif %}

{% if node.path_dark_mode %}

{% endif %}
{% if node.caption %}
{{ node.caption }}
{% endif %}
{% if node.target %}
{% endif %}
"""
```
=== "Code"
``` {.python title='mknodes.basenodes.mkcard.MkCard' linenums='20'}
class MkCard(mktemplate.MkTemplate):
"""A card node, displaying an image, a button-like label and a hover caption.
This node requires addtional CSS to work.
"""
ICON = "material/square-medium"
STATUS = "new"
CSS = [resources.CSSFile("grid.css")]
def __init__(
self,
title: str,
image: str,
*,
caption: str | None = None,
target: linkprovider.LinkableType | None = None,
size: int = CARD_DEFAULT_SIZE,
path_dark_mode: str | None = None,
**kwargs: Any,
):
"""Constructor.
Args:
title: Button text
image: Card image
caption: Image caption
target: Link target. Can be a URL, an MkPage, or an MkNav
size: Height/Width of the card
path_dark_mode: Optional alternative image for dark mode
kwargs: keyword arguments passed to parent
"""
super().__init__("output/markdown/template", **kwargs)
self.target = target
self.title = title
self.image = image
self.caption = caption
self.size = size
self.path_dark_mode = path_dark_mode
@classmethod
def for_page(cls, page: mkpage.MkPage):
assert page.icon, "Page must have an icon"
image = mkbinaryimage.MkBinaryImage.for_icon(page.icon)
card = MkCard(
page.title,
image=image.path,
caption=page.subtitle or "",
target=page,
)
card.add_file(image.path, image.data)
return card
```